<template>
  <div>
    <el-breadcrumb  separator-class="el-icon-arrow-right" style="font-size: 15px">

      <el-breadcrumb-item  :to="{ path: '/' }">
        <i class="el-icon-s-promotion"></i>
        后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>属性模版管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <div style="margin-bottom: 30px">
      <el-button type="primary" size="medium"
      @click="$router.push('/sys-admin/product/attributeTemplate/insert')">添加属性模版</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column  prop="id" label="ID" width="60" align="center"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="name" label="名称" width="180"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="pinyin" label="拼音" ></el-table-column>
      <el-table-column :show-overflow-tooltip="true" prop="keywords" label="关键词" ></el-table-column>
      <el-table-column prop="sort" label="排序序号" width="80px" align="center"></el-table-column>
      <el-table-column width="100px" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="handleEdit(scope.$index, scope.row)"></el-button>
          <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="handleDelete(scope.$index, scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align: right;margin: 10px auto">
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total">
      </el-pagination>
    </div>

    <el-dialog title="修改属性模版" :visible.sync="dialogFormVisible">
      <el-form :model="editForm" :rules="rules" label-width="80px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="拼音" prop="pinyin">
          <el-input v-model="editForm.pinyin" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关键词" prop="keywords">
          <el-input v-model="editForm.keywords" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序序号" prop="sort">
          <el-input v-model="editForm.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [

        ],
        total:0,
        pageSize:0,
        currentPage:1,
        editForm:{name: '',
          pinyin: '',
          keywords:'',
          sort: ''},
        dialogFormVisible: false,
        formLabelWidth: '80px',
        rules: {
          name: [
            {required: true, message: '请输入名称', trigger: 'blur'},
            {min: 2, max: 25, message: '长度在 2 到 25 个字符', trigger: 'blur'}
          ],
          pinyin: [
            {required: true, message: '请输入拼音', trigger: 'blur'}
          ],
          keywords: [
            {required: true, message: '请输入关键词', trigger: 'blur'}
          ],
          sort: [
            {required: true, message: '请输入排序序号', trigger: 'blur'},
            {pattern:/^([0-9]|[1-9][0-9])$/, message: '排序序号必须是0~99之间的数值', trigger: 'blur'}
          ]
        }
      }
    },
    methods:{
      handleEdit(index, row) {
        let url="http://176.212.26.33:8088/attributeTemplate/getStandard?id="+row.id;
        let jwt=localStorage.getItem('jwt');

        this.axios.create({
          'headers':{
            'Authorization': jwt
          }
        }).get(url).then((response)=>{
          let jsonResult=response.data;
          if(jsonResult.state==2000){
            this.editForm=jsonResult.data;
            this.dialogFormVisible= true;
          }else {
            this.$alert(jsonResult.message,'错误',{
              confirmButtonText: '确定',
              callback: action => {
                this.loadAtributeTemplateList();
              }
            });
          }
        });
      },
      handleDelete(index, row) {
        console.log(index, row);

        this.$confirm('此操作将永久删除【' + row.id + '-' + row.name + '】, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let url='http://176.212.26.33:8088/attributeTemplate/delete'
          let jwt=localStorage.getItem('jwt');

          this.axios.create({
            'headers':{
              'Authorization': jwt
            }
          }).post(url,"attributeTemplateId="+row.id).then((response)=>{
            if(response.data.state==2000){
              this.$message.success("删除成功!")
              this.loadAttributeTemplateList();
            }else if (response.data.state == 4040) {
              this.$alert(response.data.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                  this.loadAttributeTemplateList();
                }
              });
            } else if (response.data.state == 4090) {
              this.$alert(response.data.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      loadAttributeTemplateList(){
        let pageNum=this.$router.currentRoute.query.pageNum;
        if(!pageNum){
          pageNum=1;
        }
        let url="http://176.212.26.33:8088/attributeTemplate/list?pageNum="+pageNum;
        let jwt=localStorage.getItem('jwt');

        this.axios.create({
          'headers':{
            'Authorization': jwt
          }
        }).get(url).then((response)=>{
          let jsonResult=response.data;
          if(jsonResult.state==2000){
            this.tableData=jsonResult.data.list;
            this.total=jsonResult.data.total;
            this.pageSize=jsonResult.data.pageSize;
            this.currentPage=jsonResult.data.currentPage;
          }else {
            this.$alert(jsonResult.message,'错误',{
              confirmButtonText: '确定',
              callback: action => {}
            });
          }
        });
      },
      handleCurrentChange(value){
        console.log(value)
        this.$router.replace('?pageNum='+value)
        this.loadAttributeTemplateList();
      },
      update(){
        {
          let url = 'http://176.212.26.33:8088/attributeTemplate/update';
          console.log('url = ' + url);

          let formData = this.qs.stringify(this.editForm);
          console.log('formData = ' + formData);

          let jwt=localStorage.getItem('jwt');

          this.axios.create({
            'headers':{
              'Authorization': jwt
            }
          }).post(url, formData).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.state == 2000) {
              this.$message({
                message: '修改属性模版成功！',
                type: 'success'
              });
              this.dialogFormVisible = false;
              this.loadAttributeTemplateList();
            } else if (jsonResult.state == 4040){
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                  this.dialogFormVisible = false;
                  this.loadAttributeTemplateList();
                }
              });
            } else {
              this.$alert(jsonResult.message, '错误', {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        }
      }
    },
    mounted() {
      this.loadAttributeTemplateList();
    }
  }
</script>
